<template>
  <div class="home_header">
    <div class="heade_left">
      <span v-login>
        <div class="choose">
          <el-icon @click="handleOpenCenter">
            <Operation />
          </el-icon>
        </div>
      </span>
      <div class="app_logo" @click="handleHome">
        <img src="@/assets/applogo.png" alt="" />
      </div>
    </div>
    <div class="head_right">
      <div class="phone">
        <img src="@/assets/whatsapp.png" alt="" />
      </div>
      <div class="car" @click="handleCar">
        <el-badge :value="nums" class="item">
          <el-icon>
            <ShoppingCart />
          </el-icon>
        </el-badge>

      </div>
      <div class="language" @click="handleOpenLanguage">
        <div class="title">{{ $t("home.head") }}</div>
        <el-icon>
          <ArrowRightBold />
        </el-icon>
      </div>
    </div>
    <!-- 切换语言 -->
    <wLanguagePop ref="wLanguagePop">
    </wLanguagePop>
    <!-- 用户中心  -->
    <wUsercenterPop ref="wUsercenterPop"></wUsercenterPop>

  </div>
</template>

<script>
import { defineComponent, ref, computed } from "vue";
import { useRouter } from 'vue-router'
import wLanguagePop from "./w-language-pop.vue";
import wUsercenterPop from "./w-usercenter-pop.vue";
import { useStore } from "vuex";
export default defineComponent({
  props: {},
  components: {
    wLanguagePop,
    wUsercenterPop
  },
  setup() {
    const store = useStore()
    const nums = computed(() => {
      return store.state.carNums
    })

    const wLanguagePop = ref()
    const handleOpenLanguage = () => {
      wLanguagePop.value.open()
    }


    const wUsercenterPop = ref()
    const handleOpenCenter = () => {
      wUsercenterPop.value.open()
    }
    const router = useRouter()
    const handleHome = () => {
      router.push('/home')
    }


    const handleCar = () => {
      router.push('/car')
    }
    return {
      wLanguagePop,
      handleOpenLanguage,
      wUsercenterPop,
      handleOpenCenter,
      handleHome,
      handleCar,
      nums,
      store
    };
  },
});
</script>

<style scoped lang="scss">
.home_header {
  height: 44px;
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid rgb(235, 234, 234);
  background: #fff;
  position: fixed;
  width: 100%;
  z-index: 1000;
  top: 0;

  .heade_left {
    width: 30%;
    display: flex;
    flex-direction: row;
    align-items: center;

    .choose {
      height: 44px;
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 44px;
      text-align: center;
      border-right: 1px solid rgba(0, 0, 0, 0.08);
      justify-content: center;
    }

    .app_logo {
      height: 44px;
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 44px;
      margin-left: 10px;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }

  .head_right {
    width: 70%;
    height: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: right;
    overflow: hidden;

    .car,
    .phone {
      height: 44px;
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 44px;
    }

    .language {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: right;
      color: #999;

      .title {
        font-size: 14px;
      }
    }
  }

  .el-icon {
    width: 20px;
    height: 20px;
    display: flex;

    svg {
      width: 100%;
      color: rgb(136, 136, 136);
      height: 100%;
    }
  }
}
</style>
